<template>
  <!-- 饼图 -->
  <div class="chart-container" :style="position">
      <div :id="id" class="chart-main">
      </div>
      <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {onMounted,watch} from 'vue'
export default {
  name:'BreadChart',
  props:{
    data:{
      type:String,
      default:'hhh'
    },
    info: {
      type: Object,
      default: () => ({})
    },
    boxPosition:{       
      type:Object,       
      default:()=>{}     
    }
  },
  setup(props){
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
    const id = 'bread-main'+Number(Math.random()*100).toFixed(4)
    var myChart;
    var option;
    onMounted(()=>{
      myChart = echarts.init(document.getElementById(id));
      option={
        title: {
            text: '培训内容占比',
            textStyle: {
              fontSize: 14,
              color: "#74bdff"
            },
            left:'5%',
            top:'3%',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center',
            textStyle: {
              color: "#7585a7"
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '50%'],
                bottom:'15%',
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 2,
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter:"{d}%",
                    color:'#8df',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold',
                        position: 'inside',
                        formatter:"{d}%",
                        color:'#f40',
                    },
                    scale:true,
                    scaleSize:10
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: '课程',fontStyle:{color:'#ff4400'}},
                    {value: 735, name: '考试'},
                    {value: 580, name: '培训计划'},
                    {value: 484, name: '活动'},
                    {value: 300, name: '问卷'}
                ]
              }
        ]
      }
      create()
    })
    const create = ()=>{
      myChart.setOption(option)
    }
    watch(
        () => props.info?.size,
        () => {
            myChart.dispose() //重置echart
            myChart = null
            myChart = echarts.init(document.getElementById(id));
            myChart.setOption(option)
        },
        { deep: true,}
    );
    
    return{
      position,
      id

    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;//暂时，需改为动态数据
    background-color: rgba($color: #071c55, $alpha: 0.5);
    i{
    width: 20px;
    height: 20px;
    position: absolute;
    // display: block;
  }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../assets/images/useimages/br.png') no-repeat right bottom;
  }
  }
  .chart-main{
  width: 100%;
  height: 100%;
  }
</style>